<template>
	<view>
		<map style="width:100%;height:85vh;" :latitude="latitude" :longitude="longitude" :scale="scale" :markers="marker"  @markertap="markertap"></map>
	</view>
</template>


<script>
	export default {
		data() {
			return {
				latitude: 34.25938010628658, //维度
				longitude: 108.9470386505127, //经度
				scale: 13, //缩放级别
				bottomData: false,
				circles: [], //圆
				marker: [{
						id: 0,
						title:'大雁塔',//标注点名
						latitude: 34.219152857065815, //纬度
						longitude: 108.96408677101137, //经度
						iconPath: '../../../static/d.png', //图标
						rotate: 0, //旋转度数
						width: 25, //宽
						height: 30, //高
						alpha: 0.5, //透明度
						
						label:{
							content:"大雁塔",
							dispaly:'ALWAYS',//长显
							color:"#000000",//字体颜色
							fontSize:14,//字大小
							padding:7,
							bgColor:"#ffffff",//背景颜色
							borderRadius:8,
							borderWidth:1,//边框宽度
							textAlign:'left',
							borderColor:'#000000'
							
						}
					},
					{
						id: 1,
						title:'小雁塔',//标注点名
						latitude: 34.23931578545352, //纬度
						longitude: 108.94404530525209, //经度
						iconPath: '../../../static/d.png', //图标
						rotate: 0, //旋转度数
						width: 20, //宽
						height: 30, //高
						alpha: 0.5, //透明度
						label:{
							content:"小雁塔",
							dispaly:'ALWAYS',//长显
							color:"#000000",
							fontSize:14,
							padding:7,
							bgColor:"#ffffff",
							borderRadius:8,
							borderWidth:1,
							textAlign:'left',
							borderColor:'#000000'
							
						}
					},
					
				],
			}
		},
		computed: {
			coverbottom() {
				let data = ''
				if (this.bottomData) {
					data = '20rpx'
				} else {
					data = '100rpx'
				}
				return data
			}
		},

		methods: {
			//地图点击事件
			markertap(e) {
				console.log("===你点击了标记点===", e)
			},
		}
	}
</script>


<style lang="scss" scoped>
	.map {
		height: 550px;
		width: 375px;
	}
</style>
